<template>
	<div>
		<div class="header9">
			<div class="login">登录</div>
		</div>
		<div class="information">
			<div>手机号</div>
			<div class="phoneNumber">
				<input type="number" class="tel" v-model="telPhone">
				<div class="error"></div>
				<div class="btn" @click="isclick && sendOut()" ref='btn'>{{ tips }}</div>
			</div>
		</div>
		<div class="information">
			<div>验证码</div>
			<div class="phoneNumber">
				<input type="number" class="tel2" v-model="verification">
			</div>
		</div>
		<div class="clickLogin">
			<span @click="flag && signIn()">登录</span>
		</div>
	</div>
</template>

<script>
	export default{
		data:function(){
			return {
				tips:'发送验证码',
				tips2:'再次发送',
				num:30,
				timer:null,
				isclick:true,
				telPhone:'',
				verification:'',
				flag:false
			}
		},
		mounted() {
			// this.getPhoneCode()
		},
		methods:{
			sendOut:function(){
				let p = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|18[0-9]\{8}|14[57]\d{8})$/;
				if(p.test(this.telPhone)){
					this.text()
					this.$refs.btn.style.background = '#E6E6E6'
					this.$refs.btn.style.color = '#007AFF'
					this.countDown()
					this.isclick = false
					this.getPhoneCode()
					this.verification = '123456'
					this.flag = true
				}else{
					alert('手机号不正确')
				}
			},
			countDown:function(){
				this.timer = setInterval(()=>{
					if(this.num == 0){
						clearInterval(this.timer)
						this.timer = null
						this.num = 30
						this.$refs.btn.style.background = '#007AFF'
						this.$refs.btn.style.color = '#FFFFFF'
						this.tips = this.tips2
						this.isclick = true
					}else{
						this.num--
						this.text()
					}
				},1000)
			},
			text:function(){
				this.tips = this.num
			},
			text2:function(){
				this.num = this.tips2
			},
			getPhoneCode:function(){
				this.$axios.post('http://chonghekj.com/daily/index.php/Home/user/getSmsCode',this.$qs.stringify({
					// telphone:this.telPhone
					telphone:this.telPhone
				})).then((res)=>{
					console.log(res)
				})
			},
			signIn:function(){
				// localStorage.setItem('userinfo', JSON.stringify({
				// 	islogin:true,
				// }))
				this.$axios.post('http://chonghekj.com/daily/index.php/Home/user/login',this.$qs.stringify({
					telphone:this.telPhone,
					smscode:this.verification
				})).then((res)=>{
					console.log(res)
					if(res.data.message == '登陆成功'){
						localStorage.setItem('userinfo', JSON.stringify({
							islogin:true,
							access_token:res.data.data.access_token,
							id:res.data.data.id,
							username:res.data.data.username
						}))
						this.$router.push({
							path:'/my',
						})
						this.flag = false
						this.telPhone = ''
						this.verification = ''
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.header9 {
		width: 100%;
		background: #007AFF;
		height: 50px;
		line-height: 50px;
		.login {
			text-align: center;
			color: #FFFFFF;
			font-size: 25px;
		}
	}
	.phoneNumber{
		display: flex;
		box-sizing: border-box;
		position: relative;
		.error{
			position: absolute;
		}
		.tel{
			outline: none;
			display: inline-block;
			box-sizing: border-box;
			padding: 0 5px;
			border: none;
			border-bottom: 1px solid #E6E6E6;
		}
		.btn{
			width: 85px;
			height: 30px;
			margin-left: 20px;
			background: #4395FF;
			color: #FFFFFF;
			font-size: 15px;
			padding: 5px;
			border-radius: 5px;
			box-sizing: border-box;
			text-align: center;
		}
	}
	.information{
		padding: 0 25px 0 25px;
		margin-top: 50px;
	}
	.tel2{
		outline: none;
		display: inline-block;
		box-sizing: border-box;
		padding: 0 5px;
		border: none;
		border-bottom: 1px solid #E6E6E6;
		height: 30px;
	}
	.clickLogin{
		text-align: center;
		margin-top: 60px;
		span{
			background: #007AFF;
			color: #FFFFFF;
			padding: 10px 30px;
			border-radius: 10px;
		}
	}
</style>

<style>
</style>
